<template>
  <div>
    <el-table v-loading="loading" :data="list" border stripe :key="1">
      <el-table-column label="序号" align="center" type="index" :index="indexMethod"></el-table-column>
      <el-table-column label="项目类型" align="center" prop="projectType">
        <template slot-scope="scope">
          <div>{{scope.row.projectType === '1' ? '住宅' : '非住宅'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center" prop="projectName"/>
      <el-table-column label="地址" align="center" prop="projectAddress"/>
      <el-table-column label="所属白蚁防治公司" align="center" prop="controlName"/>
      <el-table-column label="经纬度" align="center" prop="latLong"/>
      <el-table-column label="运行状态" align="center" prop="runningState">
         <template slot-scope="scope">
          <div>{{scope.row.runningState === '1' ? '运行中' : '停止'}}</div>
        </template>
      </el-table-column>
      <el-table-column label="监测点数" align="center" prop="monitorPointNum"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="230">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="edit(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" @click="detail(scope.row)">详情</el-button>
          <el-button size="mini" type="text" @click="message(scope.row)">短信</el-button>
          <el-button size="mini" type="text" style="color: red" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
      class="pagination-container"
    />
    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
        <el-row :gutter="10">
          <el-col :span="12">
            <el-form-item label="项目类型" prop="projectType">
              <el-select v-model="ruleForm.projectType" placeholder="请选择项目类型" :disabled="disabled">
                <el-option label="住宅" value="1"></el-option>
                <el-option label="非住宅" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="ruleForm.projectName" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址" prop="projectAddress">
              <el-input v-model="ruleForm.projectAddress" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="白蚁防治公司" prop="controlId">
              <el-select v-model="ruleForm.controlId" placeholder="请选择白蚁防治公司" :disabled="disabled">
                <el-option label="测试1公司" value="1"></el-option>
                <el-option label="测试2公司" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="经纬度" prop="latLong">
              <el-input v-model="ruleForm.latLong" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="运行状态" prop="runningState">
              <el-select v-model="ruleForm.runningState" placeholder="请选择运行状态" :disabled="disabled">
                <el-option label="运行中" value="1"></el-option>
                <el-option label="停止" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监测点数" prop="monitorPointNum">
              <el-input v-model="ruleForm.monitorPointNum" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="!disabled">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { companyMonitorProjectApplyQuery, companyMonitorProjectApplyUpdate } from "@/api/manage/approval";
export default {
  name: "reviewList",
  data() {
    return {
      // 遮罩层
      loading: false,
      list: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      dialogVisible: false,
      ruleForm: {
        projectType: "",
        projectName: "",
        projectAddress: "",
        controlId: "",
        latLong: "",
        runningState: "",
        monitorPointNum: ""
      },
      monitorProjectId:'',
      disabled: true,
      title: '',
      rules: {
        projectType: [
          { required: true, message: "请选择项目类型", trigger: "change" }
        ],
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" }
        ],
        projectAddress: [
          { required: true, message: "请输入地址", trigger: "blur" }
        ],
        controlId: [
          { required: true, message: "请选择白蚁防治公司", trigger: "change" }
        ],
        latLong: [{ required: true, message: "请输入经纬度", trigger: "blur" }],
        runningState: [
          { required: true, message: "请选择白运行状态", trigger: "change" }
        ],
        monitorPointNum: [
          { required: true, message: "请输入监测点数", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      companyMonitorProjectApplyQuery(this.queryParams)
        .then(res => {
          console.log(res, "23232");
          if (res.errorCode == "000000") {
            this.list = res.data.list;
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    indexMethod(index) {
      return index + 1;
    },
    edit(row) {
      console.log(row);
      this.title = '编辑'
      this.disabled = false
      this.monitorProjectId = row.monitorProjectId
      this.ruleForm.projectType = row.projectType
      this.ruleForm.projectName = row.projectName
      this.ruleForm.projectAddress = row.projectAddress
      this.ruleForm.controlId = row.controlId
      this.ruleForm.latLong = row.latLong
      this.ruleForm.runningState = row.runningState
      this.ruleForm.monitorPointNum = row.monitorPointNum
      this.dialogVisible = true;
    },
    detail(row) {
      this.title = '详情'
      this.disabled = true
      this.monitorProjectId = row.monitorProjectId
      this.ruleForm.projectType = row.projectType
      this.ruleForm.projectName = row.projectName
      this.ruleForm.projectAddress = row.projectAddress
      this.ruleForm.controlId = row.controlId
      this.ruleForm.latLong = row.latLong
      this.ruleForm.runningState = row.runningState
      this.ruleForm.monitorPointNum = row.monitorPointNum
      this.dialogVisible = true;
      console.log(row);
    },
    message(row) {
      console.log(row);
    },
    handleDelete(row) {
      console.log(row);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            console.log(this.ruleForm, 'ruleFormruleForm');
            const data = {
              ...this.ruleForm, 
              monitorProjectId: this.monitorProjectId
            }
            companyMonitorProjectApplyUpdate(data).then(res =>{
              console.log(res, 'ressssss');
              if(res.errorCode === '000000') {
                this.$modal.msgSuccess('编辑成功！')
                this.dialogVisible = false;
                this.getList()
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep .el-select {
  width: 100% !important;
} 
::v-deep .el-dialog__header {
  border-bottom: 1px solid #e9e9ec;
}
</style>